<template>
    <div class="container">
      <!-- 最上面一行卡片里的三个按钮 -->
      <el-card class="box-card">
        <el-button type="primary" @click="showDimensionCreate">维度创建</el-button>
        <el-button type="primary" @click="showDimensionDisplay">维度展示</el-button>
        <el-button type="primary" @click="showOfferComparison" :disabled="selectedOffers.length < 2">offer比较</el-button>
      </el-card>
  
      <!-- 已offer的简历投递信息表格 -->
      <el-card class="box-card" style="margin-top: 10px;">
        <el-table ref="offerTable" :data="offerData" style="width: 100%" size="small" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column prop="id" label="序号" width="90" align="center" sortable></el-table-column>
          <el-table-column prop="company" label="公司" :min-width="120"></el-table-column>
          <el-table-column prop="jobTitle" label="岗位" :min-width="120"></el-table-column>
          <el-table-column prop="base" label="Base" :min-width="120"></el-table-column>
          <el-table-column label="维度打分" :min-width="150">
            <template slot-scope="scope">
              <el-button type="text" @click="rateOffer(scope.row)">打分</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
        background
          @current-change="handlePageChange"
          :current-page="currentPage"
          :page-size="pageSize"
          layout="total, prev, pager, next, jumper"
          :total="total"
          style="margin-top: 10px;"
        ></el-pagination>
      </el-card>
  
      <!-- 维度创建页面 -->
      <el-dialog :visible.sync="dimensionCreateVisible" title="维度创建" width="50%">
        <el-form :model="newDimension">
          <el-form-item label="名称">
            <el-input v-model="newDimension.name"></el-input>
          </el-form-item>
          <el-form-item label="最大分值">
            <el-input v-model="newDimension.maxVal" type="number"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dimensionCreateVisible = false">取消</el-button>
          <el-button type="primary" @click="createDimension">保存</el-button>
        </span>
      </el-dialog>
  
      <!-- 维度展示页面 -->
      <el-dialog :visible.sync="dimensionDisplayVisible" title="维度展示" width="50%">
        <el-table :data="dimensions" style="width: 100%" size="small">
          <el-table-column prop="id" label="序号" :min-width="120"></el-table-column>
          <el-table-column prop="name" label="名称" :min-width="120"></el-table-column>
          <el-table-column prop="maxVal" label="最大分值" :min-width="120"></el-table-column>
          <el-table-column label="操作" :min-width="120">
            <template slot-scope="scope">
              <el-button type="text" @click="editDimension(scope.row)">编辑</el-button>
              <el-button type="text" @click="deleteDimension(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dimensionDisplayVisible = false">关闭</el-button>
        </span>
      </el-dialog>
      
      <!-- 编辑对话框 -->  
      <el-dialog :visible.sync="editDialogVisible" title="编辑维度" width="50%">  
        <el-form :model="editForm" ref="editForm">  
          <el-form-item label="名称">  
            <el-input v-model="editForm.name"></el-input>  
          </el-form-item>  
          <el-form-item label="最大分值">  
            <el-input v-model="editForm.maxVal" type="number"></el-input>  
          </el-form-item>  
          <el-form-item>  
            <el-button type="primary" @click="handleEditSubmit">保存</el-button>  
            <el-button @click="editDialogVisible = false">取消</el-button>  
          </el-form-item>  
        </el-form>  
      </el-dialog>  
  
      <!-- 维度打分页面 -->
      <el-dialog :visible.sync="ratingVisible" title="维度打分" width="50%">
        <el-form :model="ratingForm">
          <el-form-item v-for="dimension in dimensions" :label="dimension.name" :key="dimension.id">
            <el-input v-model="ratingForm[dimension.name]" type="number" :max="dimension.maxVal"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="ratingVisible = false">取消</el-button>
          <el-button type="primary" @click="submitRating">保存</el-button>
        </span>
      </el-dialog>
  
      <!-- offer比较结果页面 -->
      <el-dialog :visible.sync="comparisonVisible" title="offer比较结果" width="50%">
        <p>{{ comparisonResult }}</p>
        <span slot="footer" class="dialog-footer">
          <el-button @click="comparisonVisible = false">关闭</el-button>
        </span>
      </el-dialog>
  
      <!-- 提示信息对话框 -->
      <el-dialog :visible.sync="infoDialogVisible" title="提示" width="30%">
        <p>{{ infoMessage }}</p>
        <span slot="footer" class="dialog-footer">
          <el-button @click="infoDialogVisible = false">关闭</el-button>
        </span>
      </el-dialog>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        offerData: [{
            jobTitle: '笔试',
          company: '公司A',
          base: '北京',
          },
          {
            jobTitle: '笔试',
          company: '公司A',
          base: '北京',
          },
          {
            jobTitle: '笔试',
          company: '公司A',
          base: '上海',
          },],
        currentPage: 1,
        pageSize: 5,
        total: 3,
        selectedOffers: [],
        dimensions: [{name:'薪资满意度',maxVal:100},
            {name:'工作环境',maxVal:100},
            {name:'提升空间',maxVal:100}
        ],
        newDimension: {
          name: '',
          maxVal: ''
        },
        dimensionCreateVisible: false,
        dimensionDisplayVisible: false,
        editDialogVisible: false,  
        editForm: { // 用于保存编辑的维度信息  
          name: '',  
          maxVal: 0,  
        },  
        ratingVisible: false,
        ratingForm: {},
        selectedOffer: null,
        comparisonVisible: false,
        comparisonResult: '',
        infoDialogVisible: false,
        infoMessage: ''
      };
    },
    methods: {
      showDimensionCreate() {
        this.dimensionCreateVisible = true;
      },
      showDimensionDisplay() {
        // 调用后端API获取维度信息//记得编写后端把try和下面这行删了
        // this.dimensionDisplayVisible = true;
        try{
          this.$request.get('/member/dimension/display')
            .then(response => {
              if (response.data.length > 0) {
                this.dimensions = response.data;
                this.dimensionDisplayVisible = true;
              } else {
                this.infoMessage = '没有维度信息，请先创建维度。';
                this.infoDialogVisible = true;
              }
            })
          .catch(error => {
            console.error('获取维度信息失败', error);
            this.$message.error('获取维度信息失败');
          });
        }catch (error) {
          console.error("Error loading reserve data:", error);
        }
      },
      createDimension() {
        // 调用后端API创建维度
        this.$request.post('/member/dimension/add', this.newDimension)
          .then(response => {
            this.$message.success('维度创建成功');
            this.dimensionCreateVisible = false;
            this.newDimension = { name: '', maxVal: '' };
          })
          .catch(error => {
            console.error('维度创建失败', error);
            this.$message.error('维度创建失败');
          });
      },
      editDimension(row) {
        this.editForm = { ...row };
        this.editDialogVisible = true;
        this.editId = row.id;
      },
      handleEditSubmit() {
      // 调用后端API提交修改
      this.$request.post('/member/dimension/edit/'+this.editId, this.editForm)
        .then(response => {
          this.$message.success('修改成功');
          this.editDialogVisible = false;
          this.showDimensionDisplay(); // 重新查询
        })
        .catch(error => {
          this.$message.error('修改失败');
        });
    },
      deleteDimension(dimension) {
        // 调用后端API删除维度
        this.$request.delete('/member/dimension/delete/'+dimension.id)
          .then(response => {
            this.$message.success('维度删除成功');
            this.showDimensionDisplay(); // 重新获取维度信息
          })
          .catch(error => {
            console.error('维度删除失败', error);
            this.$message.error('维度删除失败');
          });
      },
      rateOffer(offer) {
        this.selectedOffer = offer;
        this.ratingForm = {}; // 清空打分表单
        // 调用后端API获取维度信息
        this.$request.get('/member/dimension/display')
          .then(response => {
            this.dimensions = response.data;
            // 调用后端API获取打分信息
            return this.$request.get('/member/offerRating/'+offer.id);
          })
          .then(response => {
            const ratings = response.data;
            this.dimensions.forEach(dimension => {
              this.$set(this.ratingForm, dimension.name, ratings[dimension.name] || 0);
            });
            this.ratingVisible = true;
          })
          .catch(error => {
            console.error('获取维度或打分信息失败', error);
            this.$message.error('获取维度或打分信息失败');
          });
      },
      submitRating() {
        // 提交打分信息到后端
        const payload = {
          offerId: this.selectedOffer.id,
          ratings: this.ratingForm
        };
        this.$request.post('/member/ratingChange/'+this.selectedOffer.id, this.ratingForm)
          .then(response => {
            this.$message.success('打分保存成功');
            this.ratingVisible = false;
          })
          .catch(error => {
            console.error('打分保存失败', error);
            this.$message.error('打分保存失败');
          });
      },
      showOfferComparison() {
        if (this.selectedOffers.length < 2) {
          this.infoMessage = '请选择至少两个offer进行比较';
          this.infoDialogVisible = true;
          return;
        }
        // 调用后端API进行offer比较
        const offerIds = this.selectedOffers.map(offer => offer.id);
        this.$request.post('/member/compareOffers', { data:offerIds })
          .then(response => {
            this.comparisonResult = response.data;
            this.comparisonVisible = true;
          })
          .catch(error => {
            console.error('offer比较失败', error);
            this.$message.error('offer比较失败');
          });
      },
      handleSelectionChange(val) {
        this.selectedOffers = val;
      },
      handlePageChange(page) {
        this.currentPage = page;
        this.fetchOffers();
      },
      fetchOffers() {
        // 调用后端API获取offer信息
        this.$request.get('/member/offers', { params: { currentPage: this.currentPage, size: this.pageSize } })
          .then(response => {
            this.offerData = response.data;
            this.total = response.data.total;
          })
          .catch(error => {
            console.error('获取offer信息失败', error);
            this.$message.error('获取offer信息失败');
          });
      }
    },
    created() {
      this.fetchOffers();
    }
  };
  </script>
  
  <style scoped>
  .container {
    padding: 10px;
    background: #f5f5f5;
    font-size: 14px;
    overflow-x: hidden;
  }
  
  .el-dialog {
    max-width: 600px;
  }
  
  .dialog-footer {
    text-align: right;
  }
  
  .el-table th {
    background-color: #f2f2f2;
    border-radius: 8px;
    padding: 10px;
  }
  
  .el-table th::before {
    content: '';
  }
  </style>
  